<template>
	<view class="wrapForm">
		<uni-nav-bar @clickLeft="leftClick" :leftIcon="'back'" :statusBar="true" :border="false"
			:background-color="'#EAFCFF'" title="认证成为经济人"></uni-nav-bar>
		<block v-if="current==0">
			<view class="bgLine flex jst-between pL25 pR25">
				<block v-if="!isSm">
					<view class="w60">
						<view class="font26 bold">实名认证</view>
						<view class="font14 u-9 mT5">
							仅确保您的信息真实有效，信息 将严格保密
						</view>
					</view>
					<image class="rzImg" :src="resources.rzImg" mode=""></image>
				</block>
			</view>
			<view class="wrapFormBody pL15 pR15 pT15 rzBox">
				<view class="font18">个人基本信息</view>
				<u-form :label-width="200" :error-type="['toast']" :label-style="{'font-size':'30rpx'}"
					class="xf-wrap-form" ref="dataForm" :rules="rules" :model="formData">

					<u-form-item :required="true" label="真实姓名" :label-position="'top'" prop="realName">
						<view class="w100">
							<u-input :disabled="isSm" class="t-right" placeholder="请输入真实姓名"
								v-model="formData.realName" />

						</view>
					</u-form-item>
					<u-form-item :required="true" label="身份证号" :label-position="'top'" prop="idCard">
						<view class="w100 ">
							<u-input class="t-right" placeholder="请输入身份证号" v-model="formData.idCard" />
						</view>
					</u-form-item>
					<u-form-item :required="true" label="联系电话" :label-position="'top'" prop="phone">
						<view class="w100 flex alg-center jst-between">
							<u-input class="t-right" placeholder="请输入联系电话" v-model="formData.phone" />
						</view>
					</u-form-item>
					<u-form-item :required="true" label="地址" :label-position="'top'" prop="address">
						<view class="w100 flex alg-center jst-between">
							<view class="w70"><u-input :disabled="true" class="t-right" placeholder="请选择地址"
									v-model="formData.address" />
							</view>
							<image @click="chooseLocation" class="imgW36" :src="resources.posIcon" mode=""></image>
						</view>
					</u-form-item>
					<u-form-item :required="true" label="详细地址" :label-position="'top'" prop="homeAddress">
						<view class="w100 ">
							<u-input class="t-right" placeholder="请输入详细地址" v-model="formData.homeAddress" />
						</view>
					</u-form-item>
					<u-form-item :required="true" label="所属驿站" :label-position="'top'" prop="organizationName">
						<view class="w100 ">
							<u-input type="select" class="t-right" placeholder="请选择地址"
								v-model="formData.organizationName" @click="showPicker" />
						</view>
					</u-form-item>
					<view v-if="isSm">
						<view class="rzCardBox flex alg-center jst-between pL15 pR5">
							<view class="flex alg-center">
								<image class="imgRzCard" :src="resources.sfCard" mode=""></image>
								<text class="mL10 font15">身份证认证</text>
							</view>
							<u-icon name="arrow-right" size="24" color="#8d8d8d"></u-icon>
						</view>
						<view class="rzCardBox flex alg-center jst-between pL15 pR5">
							<view class="flex alg-center">
								<image class="imgRzCard" :src="resources.face" mode=""></image>
								<text class="mL10 font15">人脸识别</text>
							</view>
							<u-icon name="arrow-right" size="24" color="#8d8d8d"></u-icon>
						</view>

					</view>
				</u-form>
			</view>
			<view class="flex jst-center mT50">
				<view class="pointer rightNowPay u-f font15 t-center" @click="nextStep">
					下一步
				</view>
			</view>
			<xfTreePicker :defalutValue="formData.organizationId" :selectParent="false" ref="treePicker"
				:multiple="false" @select-change="selectChange" title="所属驿站" :localdata="deptLis" valueKey="id"
				textKey="name" codeKey="orgCode" childrenKey="children"></xfTreePicker>

		</block>
		<block v-else>
			<view class="bgLine flex jst-between pL25 pR25 pT20 pB20"></view>
			<view class="wrapFormBody pL15 pR15 pT15 rzBox">
				<view class="font18 mB10">申请理由</view>
				<view class="reasonBox">
					<u-input
						:custom-style="{'min-height':'260rpx','border-radius':'20rpx !important','padding':'30rpx !important'}"
						type="textarea" placeholder="请详细描述您需要补充的内容......" v-model="formData.applyReason" :border="false"
						:background-color="'#F8F8F8'"></u-input>
				</view>
			</view>
			<view class="flex jst-center mT50 bottomFixed pB25">
				<view class="pointer rightNowPay u-f font15 t-center" @click="saveMyInfo">
					提交审核
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		jjrAuth
	} from "@/api/economicInterface/user.js"
	import {
		getCompanyInfo
	} from "@/api/common.js"
	import {
		getOrgTree
	} from "@/api/common.js"
	import selAreaMinxs from "@/utils/selArea.js"
	import {
		chooseLocal
	} from "@/libs/map.js"
	export default {
		mixins: [selAreaMinxs],
		data() {
			return {
				isSm: false,
				current: 0,
				formData: {
					"realName": "",
					"idCard": "",
					"organizationId": "",
					organizationName: "",
					"homeAddress": "",
					"provinceId": "",
					"provinceName": "",
					"cityId": "",
					"cityName": "",
					"areaId": "",
					"areaName": "",
					"townId": "",
					"townName": "",
					address: "",
					longitude: "",
					latitude: "",
					applyReason: "",
					phone: ""
				},
				deptLis: [],
				rules: {
					realName: [{
						required: true,
						message: '请输入真实姓名',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请选择地址',
						trigger: ['change', 'blur'],
					}],
					homeAddress: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur'],
					}],
					organizationName: [{
						required: true,
						message: '请选择所属服务站点',
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '联系电话不能为空',
						trigger: ['change', 'blur']
					}, {
						pattern: /^1[3456789]\d{9}$/,
						message: '手机号格式不正确',
						trigger: ['change', 'blur']
					}],
					idCard: [{
						required: true,
						message: '请输入身份证号',
						trigger: ['change', 'blur'],
					}, {
						rule: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/,
						msg: '请正确输入您的身份证号码15-18位'
					}]
				}
			}
		},
		onReady() {
			this.$refs.dataForm.setRules(this.rules);
			this.getTreeOpt()
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				let uInfo = this.xf.onlineUtils.getUserInfo()
				if (uInfo.isAuthPersonal == 1) {
					getCompanyInfo({
						type: "2"
					}).then(res => {
						let info = res.result;
						this.formData = {
							"realName": info?.realName,
							"idCard": info?.idCard,
							"organizationId": info?.organizationId,
							organizationName: info?.organizationName,
							"homeAddress": info?.comBelongAddress,
							"provinceId": info?.provinceId,
							"provinceName": info?.provinceName,
							"cityId": info?.cityId,
							"cityName": info?.cityName,
							"areaId": info?.areaId,
							"areaName": info?.areaName,
							"townId": "",
							"townName": "",
							address: "",
							longitude: info?.longitude,
							latitude: info?.latitude,
							applyReason: "",
							phone: info?.contactPhone
						}
						this.formData.address = info?.provinceName + info?.cityName + info?.areaName;
					})
				}

			},
			showPicker() {
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, code, names) {
				this.formData.organizationName = names;
				this.formData.organizationId = ids;

			},
			async chooseLocation() {
				let res = await chooseLocal();
				let r = res.address + res.name;
				let d = this.regionDiscern(r)
				this.formData.provinceId = d.data.province.code;
				this.formData.cityId = d.data.city.code;
				this.formData.areaId = d.data.area.code;
				this.formData.provinceName = d.data.province.name;
				this.formData.cityName = d.data.city.name;
				this.formData.areaName = d.data.area.name;
				this.formData.address = this.formData.provinceName + this.formData.cityName + this.formData.areaName
				this.formData.latitude = res.latitude;
				this.formData.longitude = res.longitude;
				this.formData.homeAddress = d.data.address;

			},
			getTreeOpt() {
				getOrgTree().then(res => {
					this.deptLis = res.result[0].children;
				})
			},
			leftClick() {
				if (this.current == 0) {
					uni.navigateBack()
				} else {
					this.current = 0
				}
			},
			nextStep() {
				this.$refs.dataForm.validate(valid => {
					if (valid) {
						this.current = 1;
					} else {
						console.log('验证失败');
					}
				});
			},
			saveMyInfo() {
				let data = this.xf.deepClone(this.formData)
				delete data.address
				if (!this.formData.applyReason) {
					this.xf.onlineUtils.toast('请输入申请理由！', 2000)
				} else {
					jjrAuth(data).then(res => {
						this.xf.onlineUtils.toast("提交成功")
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/common/waitSh/index`
							})
						}, 2000)
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
		background-color: #fff;
	}

	.wrapFormBody {
		.reasonBox {
			.u-input {
				border-radius: 20rpx !important;
			}
		}
	}
</style>
<style lang="scss" scoped>
	.wrapForm {
		.rzCardBox {

			height: 128rpx;
			background: #F8F8F8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 60rpx;

			&:last-child {
				margin-top: 30rpx;
			}

			.imgRzCard {
				width: 40rpx;
				height: 32rpx;
			}
		}

		height: 100%;
		padding-bottom: 100rpx;

		.wrapFormBody {
			margin-top: -30rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
		}

		.uni-forms-item {
			align-items: center !important;
		}

		.uni-input-placeholder {
			text-align: left !important;
			color: #BDBDBD !important;
		}
	}

	.bgLine {
		background-color: #EBFCFF;
		width: 100%;
		// height: 60rpx;
		padding: 30rpx 40rpx;

		.rzImg {
			width: 168rpx;
			height: 192rpx;
		}
	}


	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #00A0C6;
		border-radius: 30rpx;

	}
</style>